<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>通过JavaScript操作XML文档分页显示</title>
<style>
div{ font-size:12px;}
a:hover {
	font-size: 9pt;	color: #FF0000;
}
a {
	font-size: 9pt;	text-decoration: none;	color: #3C404D;
}
#box{
  width: 766px;
  height: 391px;
  background-image: url("images/bg.jpg");
  margin: 5px auto;
}
.top{
  padding-top: 226px;
  width: 80%;
  margin: 0 auto;
}
.top span:nth-child(2){
  margin-left: 50px;
}
.top span:nth-child(3){
  margin-left: 130px;
}
.mid{
  width: 80%;
  margin: 10px auto;
}
.bottom{
  width: 80%;
  margin: 20px auto;
}
.bottom span:last-child{
  display: block;
  float: right;
  width: 90%;
}
#box div:last-child{
  float: right;
  margin-right: 50px;
  margin-top: 20px;
}
</style>
</head>

<body onLoad="showPage('add')">
<div id="box">
  <div class="top">
    <span>评论员ID号：<span id="id"></span></span>
    <span>作者：<span id="author"></span></span>
    <span>发表日期：<span id="datetime"></span></span>
  </div>
  <div class="mid">
    <span>评论主题：<span id="topic"></span></span>
  </div>
  <div class="bottom">
    <span>评论内容</span><span id="contents"></span>
  </div>
  <div><a href="#" onClick="showPage('reduce')">上一篇</a>&nbsp;<a href="#" onClick="showPage('add')">下一篇</a></div>
</div>
<script type="text/javascript">
  var txt='<?xml version="1.0" encoding="utf-8"?>\n' +
          '<docs>\n' +
          '<doc>\n' +
          '<id>1</id>\n' +
          '<author>有一说二</author>\n' +
          '<datetime>2021-02-20 11:50:12</datetime>\n' +
          '<topic>南方的大雪</topic>\n' +
          '<content>如今的天气真是怪啊！东北是艳阳高照，而南方却是风霜雪雨。全球的气候正在发生着巨大的变化，大自然在向人类发出警告！</content>\n' +
          '</doc>\n' +
          '<doc>\n' +
          '<id>2</id>\n' +
          '<author>堂主</author>\n' +
          '<datetime>2021-02-10 10:20:42</datetime>\n' +
          '<topic>春节</topic>\n' +
          '<content>中国人都喜欢自己的传统节日--春节。但现在人们对春节的期盼好像没有以前热烈了，更多的人关心的是春节能够放几天假。也许是现在人们的物质生活提高，生活节奏加快，冲淡了人们对春节的那份期盼！</content>\n' +
          '</doc>\n' +
          '<doc>\n' +
          '<id>3</id>\n' +
          '<author>大漠孤鹰</author>\n' +
          '<datetime>2021-06-02 13:56:23</datetime>\n' +
          '<topic>端午节</topic>\n' +
          '<content>端午节准备去旅游！</content>\n' +
          '</doc>\n' +
          '<doc>\n' +
          '<id>4</id>\n' +
          '<author>香主</author>\n' +
          '<datetime>2021-02-12 15:36:26</datetime>\n' +
          '<topic>购物</topic>\n' +
          '<content>欧亚商场举行回馈客户活动，部分商品买一赠一！</content>\n' +
          '</doc>\n' +
          '</docs>';
var xmldoc,idNode,authorNode,datetimeNode,topicNode,contentNode;			//定义变量
if (window.DOMParser) {
    var parser=new DOMParser();
    xmldoc=parser.parseFromString(txt,"text/xml");
} else {// Internet Explorer
    xmldoc=new ActiveXObject("Microsoft.XMLDOM");
    xmldoc.async=false;
    xmldoc.loadXML(txt);
}
var docs = xmldoc.getElementsByTagName("doc");
var pages = docs.length;
var currentPage = 0;
function showPage(action){
	if(action=="add")
    	currentPage++;
    else
      	currentPage--;
    if(currentPage>=pages) currentPage=pages;
    else if(currentPage<=0) currentPage=1;
    var i=currentPage-1;
	idNode=docs[i].getElementsByTagName("id");	//获取id元素的引用
	authorNode=docs[i].getElementsByTagName("author");		//获取author元素的引用
	datetimeNode=docs[i].getElementsByTagName("datetime");	//获取datetime元素的引用			
	topicNode=docs[i].getElementsByTagName("topic");//获取topic元素的引用
	contentNode=docs[i].getElementsByTagName("content");//获取content元素的引用
	id.innerHTML=idNode[0].firstChild.nodeValue;
	author.innerHTML=authorNode[0].firstChild.nodeValue;
	datetime.innerHTML=datetimeNode[0].firstChild.nodeValue;
	topic.innerHTML=topicNode[0].firstChild.nodeValue;
	contents.innerHTML=contentNode[0].firstChild.nodeValue;
}
</script>
</body>
</html>
